<template>
  <view class="container">
    <u-navbar title="意见反馈" height="50"></u-navbar>
    <u-gap height="20" bg-color="#F0F1F2" />
    <view class="top">
      如果您对平台不满意，请提交上传反馈建议，平台核实后会针对进行优化调整，您的满意是我们前进动力
    </view>
    <u-gap height="20" bg-color="#F0F1F2" />
    <view class="content">
      <view class="" style="font-size: 30rpx"> 请选择您在使用过程中遇到的问题 </view>
      <view class="feedback-box">
        <view
          v-for="item in tabsList"
          :key="item.id"
          @click="form.categoryId = item.id"
          :style="
            form.categoryId == item.id ? 'background:#10A28F;color:#fff' : 'background:#EBEBEB'
          "
          class="feedback-item"
        >
          {{ item.name }}
        </view>
      </view>
      <view class="">
        <view class="">
          <view class="" style="font-size: 30rpx"> 问题和意见（必填）。 </view>
          <view class="text-box">
            <textarea
              v-model="form.content"
              class="text-area"
              placeholder="请填写10字以上的问题描述,以便我们更好的帮助解决问题,提高服务质量。"
              name=""
              id=""
              cols="30"
              rows="10"
            ></textarea>
          </view>

          <view class="" style="font-size: 30rpx"> 图片（最多3张） </view>
          <u-upload
            max-count="3"
            :source-type="['album']"
            class="upload"
            ref="uUpload"
            :action="upUrl"
          ></u-upload>
          <view class="" style="font-size: 30rpx"> 联系方式（选填） </view>
          <input
            v-model="form.mobile"
            placeholder="便于我们与你联系"
            class="input"
            type="text"
            value=""
          />
        </view>
      </view>
    </view>

    <view @click="submit" class="submit-btn btn"> 提交反馈 </view>
  </view>
</template>

<script>
import { BASE_URL, UP_URL } from '@/common/config.js'
// #ifdef APP
import permision from '@/common/permission.js'
// #endif
export default {
  data() {
    return {
      // feedback:[{
      // 	name: '产品'
      // }]
      imgStyle: {
        width: '12rem'
      },
      upUrl: BASE_URL + UP_URL,
      tabsList: [],
      itemList: [],
      form: {
        nickname: '默认',
        mobile: '',
        categoryId: '',
        content: '',
        picUrls: []
      }
    }
  },
  onLoad() {
    this.$u.get('/app-api/cms/feedback-category/simple-list').then((res) => {
      this.tabsList = res.data
    })
    uni.getSystemInfo({
      success: (res) => {
        if (res.osName == 'android') {
          if (!uni.getStorageSync('albumPer')) {
            uni.dialog.confirm(
              '照片权限说明',
              '您上传意见图片的信息时需要照片文件访问权限，请您确认授权，否则无法上传图片。',
              () => {
                uni.setStorageSync('albumPer', true)
                permision.androidPermissionCheck(['android.permission.READ_EXTERNAL_STORAGE'])
              }
            )
          }
        }
      }
    })
  },
  methods: {
    queryList(page, pageSize) {
      let self = this
      self.$u.api
        .getNeighborVillage({
          page: page,
          limit: pageSize
        })
        .then((res) => {
          self.$refs.paging.complete(res.data)
        })
        .catch((res) => {
          self.$refs.paging.complete()
        })
    },
    submit() {
      if (!this.form.content) {
        this.$u.toast('请填写问题或意见')
        return
      }
      this.$refs.uUpload.lists.forEach((val) => {
        if (val.response) {
          this.form.picUrls.push(val.response.data)
        }
      })

      this.$u.post('/app-api/cms/feedback/create', this.form).then((res) => {
        this.$u.toast('您的意见提交成功，我们会在1-3工作日，联系您! 谢谢您的反馈', 2000)
        setTimeout(() => {
          uni.reLaunch({
            url: '/pages/ucenter/ucenter'
          })
        }, 2500)
      })
    }
  }
}
</script>

<style>
@import url('../../style/btn.css');
page {
  height: 100%;
  background: #eeeeef;
}
.top {
  padding: 30rpx 20rpx;
  background-color: #fff;
  font-size: 24rpx;
}
.content {
  padding: 20rpx;
  background-color: #fff;
}
.feedback-box {
  display: flex;
  flex-wrap: wrap;
  align-self: flex-start;
  margin: 20rpx 0;
}
.feedback-item {
  padding: 10rpx 20rpx;
  font-size: 26rpx;
  margin: 0 20rpx 20rpx 0;
  background-color: #ebebeb;
  border-radius: 10rpx;
}
.text-box {
  border: 2rpx solid #e6e6e6;
  padding: 20rpx;
  margin: 20rpx 0;
}
.text-area {
  width: 100%;
  height: 200rpx;
  font-size: 28rpx;
  color: #333;
}
.upload {
  margin: 20rpx 0;
}
.input {
  border: 2rpx solid #e6e6e6;
  height: 80rpx;
  margin: 20rpx 0;
  font-size: 28rpx;
  color: #333;
  padding: 20rpx;
  box-sizing: border-box;
  border-radius: 10rpx;
}
.btn {
  position: fixed;
  bottom: 50rpx;
  left: 50%;
  transform: translateX(-50%);
}
</style>
